<template>
  <view v-if="block || lines" :style="[textBlockStyle]" class="sc-text_block" @tap="tapHandler">
    <text :class="[
      'sc-text__value',
      lines && `sc-line-${lines}`
    ]" :decode="decode" :selectable="selectable" :style="[textStyle]" :space="space" :user-select="userSelect">
      {{ text }}
    </text>
  </view>
  <text v-else class="sc-text_inline" :decode="decode" :selectable="selectable" :style="[textStyle]" :space="space"
    :user-select="userSelect">
    {{ text }}
  </text>
</template>

<script>
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * @component  sc--text 文本组件
 * @property   {Boolean}        show           - 是否显示组件，默认 true
 * @property   {String}         text           - 显示的文本内容，默认空字符串
 * @property   {String|Number}  size           - 文字大小，默认 25
 * @property   {String}         color          - 文字颜色，默认 "#000"
 * @property   {String}         align          - 文字对齐方式，可选值 left/center/right，默认 left
 * @property   {String|Number}  lineHeight     - 文字行高
 * @property   {String}         fontWeight     - 字重，默认 normal
 * @property   {Boolean}        bold           - 是否加粗，默认 false
 * @property   {String}         decoration     - 文字装饰，可选值 none/underline/line-through，默认 none
 * @property   {String|Number}  lines          - 文本显示行数
 * @property   {String}         block          - 文本是否显示为块级元素，默认 false
 * @property   {String|Number}  letterSpacing  - 字符间距
 * @property   {String|Number}  wordSpacing    - 单词间距
 * @property   {String}         fontFamily     - 字体
 * @property   {Boolean}        decode         - 是否解码，默认 false
 * @property   {Boolean}        selectable     - 文本是否可选，默认 false
 * @property   {Boolean}        userSelect     - 是否开启用户选择功能，默认 false
 * @property   {Object}         customStyle    - 自定义样式对象，默认 {}
 * 
 * @event {Function} click - 点击文本时触发
 */

export default {
  name: "ScText",
  mixins: [mpMixin, mixin],
  props: {
    show: {
      type: Boolean,
      default: true
    },
    block: {
      type: Boolean,
      default: false
    },
    text: {
      type: [String, Number],
      default: ""
    },
    size: {
      type: [String, Number],
      default: 25
    },
    color: {
      type: String,
      default: "#000"
    },
    align: {
      type: String,
      default: "left"
    },
    lineHeight: {
      type: [String, Number]
    },
    fontWeight: {
      type: String,
      default: "normal"
    },
    bold: {
      type: Boolean,
      default: false
    },
    decoration: {
      type: String,
    },
    lines: {
      type: [String, Number]
    },
    letterSpacing: {
      type: [String, Number]
    },
    wordSpacing: {
      type: [String, Number]
    },
    fontFamily: {
      type: String
    },
    decode: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Boolean,
      default: false
    },
    userSelect: {
      type: Boolean,
      default: false
    },
    space: {
      type: [String, Number],
      default: '0'
    },
    customStyle: {
      type: Object,
      default: () => ({})
    },
  },
  emits: ["click"],
  data() {
    return {}
  },
  computed: {
    textBlockStyle() {
      return {
        justifyContent: this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'flex-end'
      };
    },
    textStyle() {
      const baseStyle = {
        textDecoration: this.decoration,
        fontWeight: this.bold ? 'bold' : this.fontWeight ? this.fontWeight : 'normal',
        fontSize: this.size && this.$sc.addUnit(this.size),
        color: this.color && this.$sc.getColor(this.color),
        lineHeight: this.lineHeight && this.$sc.addUnit(this.lineHeight),
        fontFamily: this.fontFamily,
        letterSpacing: this.letterSpacing && this.$sc.addUnit(this.letterSpacing),
        wordSpacing: this.wordSpacing && this.$sc.addUnit(this.wordSpacing)
      };
      return this.$sc.deepMerge(baseStyle, this.customStyle);
    },
  },
  methods: {
    tapHandler() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.sc-text_inline {}

.sc-text_block {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  align-items: center;
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */

  &__value {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-overflow: ellipsis;
  }
}

@for $i from 1 through 5 {
  .sc-line-#{$i} {
    /* #ifdef APP-NVUE */
    // nvue下，可以直接使用lines属性，这是weex特有样式
    lines: $i;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;

    /* #endif */
    /* #ifndef APP-NVUE */
    // vue下，单行和多行显示省略号需要单独处理
    @if $i =="1" {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }

    /* #endif */
  }
}
</style>
